import React, { memo, useCallback } from 'react'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'
import { DjradioProgramsWrapper } from './style'
import usePlayMusic from '@/hooks/usePlayMusic'
import { formatTime, formatDuration } from '@/utils/format'
import Page from '@/components/page'
import {getDjradioProgramsAction} from '../../store/actionCreators'
export default memo(function DjradioPrograms() {
  const { djradioPrograms,djradioDetail } = useSelector(state => ({
    djradioPrograms: state.getIn(['djRadio', 'djradioPrograms']),
    djradioDetail:state.getIn(['djRadio','djradioDetail'])
  }), shallowEqual)
  const dispatch = useDispatch()
  const pageChange = useCallback((page) => {
    const currentOffset = (page-1) * 100
    dispatch(getDjradioProgramsAction(djradioDetail.id,currentOffset))
  },[dispatch,djradioDetail])
  const playMusic = usePlayMusic()
  const programs = djradioPrograms || []
  return (
    <DjradioProgramsWrapper>
      <div className="songs">
      <table>
        <tbody>
            {
              programs.map((item, index) => {
                return (
                  <tr key={item.id}>
                    <td className='td1'>
                      <div className="rank-num">
                        <span className="num">{item.serialNum}</span>
                        <span className="play sprite_table" onClick={e => playMusic(item.id)}></span>
                      </div>
                    </td>
                    <td className='td2'>
                      <div className="song-name text-nowrap">
                        {item.name}
                      </div>
                    </td>
                    <td className='dt td3'>
                      <span className='playcount'>播放{item.listenerCount}</span>
                    </td>
                    <td className='td4' >赞{item.likedCount}</td>
                    <td className="td5">{formatTime(item.createTime, 'yyyy-MM-dd')}</td>
                    <td>{formatDuration(item.duration)}</td>
                  </tr>
                )
              })
            }
          </tbody>
        </table>
      </div>
      <Page totalCount={djradioDetail.programCount} pageChange={pageChange} pageSize={100}/>
    </DjradioProgramsWrapper>
  )
})
